<template>
  <common-info-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="close"
  >
    <common-group-title style="padding-left: 18px" title="详情" />
    <common-info-table :is-top-divided="true" :is-bottom-divided="true">
      <common-info-table-cell label="请求方式"
        >{{ form.method }}
      </common-info-table-cell>
      <common-info-table-cell label="日志编号" width="50%"
        >{{ form.operId }}
      </common-info-table-cell>
      <common-info-table-cell label="系统模块" width="50%"
        >{{ form.title }}
      </common-info-table-cell>
      <common-info-table-cell label="操作类型" width="50%"
        >{{ form.businessType }}
      </common-info-table-cell>
      <common-info-table-cell label="操作人员" width="50%"
        >{{ form.operName }}
      </common-info-table-cell>
      <common-info-table-cell label="源IP" width="50%"
        >{{ form.operIp }}
      </common-info-table-cell>
      <common-info-table-cell label="状态" width="50%">
        <span v-if="form.status === 0">成功</span>
        <span v-else>失败</span>
      </common-info-table-cell>
      <common-info-table-cell label="操作日期"
        >{{ form.operTime }}
      </common-info-table-cell>
    </common-info-table>
    <common-group-title style="padding-left: 18px" title="操作记录" />
    <div class="opera-table-list">
      <common-table
        :data="result"
        class="opera-table-container"
        height="188"
        style="width: 100%"
      >
        <el-table-column prop="name" label="字段名称"></el-table-column>
        <el-table-column prop="oldValue" label="操作前"></el-table-column>
        <el-table-column prop="newValue" label="操作后"></el-table-column>
      </common-table>
    </div>
  </common-info-dialog>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogTitle: "操作日志详情", // 标题
      dialogShow: false, // 是否显示
      form: {},
      result: [],
      businessTypeList: [
        { value: 0, label: "其它" },
        { value: 1, label: "新增" },
        { value: 2, label: "编辑" },
        { value: 3, label: "删除" },
        { value: 4, label: "授权" },
        { value: 5, label: "导出" },
        { value: 6, label: "导入" },
        { value: 7, label: "强退" },
        { value: 8, label: "登录" },
        { value: 9, label: "退出登录" },
        { value: 10, label: "下载" },
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 关闭
     */
    close() {
      this.dialogShow = false;
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogShow = true;
      this.form = data.operId ? data : this.$options.data().form;

      if (this.form.operParam) {
        let isError = false;
        let operaParam = [],
          operaAfter = [];
        let operaParamStr = this.form.operParam; // 编辑前
        let operaAfterStr = this.form.operAfter; // 编辑后

        try {
          operaParam = JSON.parse(operaParamStr);
          // console.log("operaParam: ", operaParam);
        } catch (e) {
          // console.warn("操作记录-操作前数据: ", operaParamStr);
          // console.warn("操作记录-操作前数据转换异常: ", e);
          isError = true;
        }

        try {
          operaAfter = JSON.parse(operaAfterStr);
          // console.log("operaAfter: ", operaAfter);
        } catch (e) {
          // console.warn("操作记录-操作后数据: ", operaAfter);
          // console.warn("操作记录-操作后数据转换异常: ", e);
          isError = true;
        }

        if (!isError) {
          let length = operaParam.length;
          if (operaAfter.length > length) length = operaAfter.length;
          let result = [];
          for (let i = 0; i < length; i++) {
            result.push({
              name: operaParam[i].name,
              oldValue: operaParam[i].value,
              newValue: operaAfter[i].value,
              isEdit: operaParam[i].value === operaAfter[i].value,
            });
          }

          this.result = result;
        }
      } else {
        this.result = [];
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.opera-table-list {
  height: 190px;
  padding: 0 18px;
  margin-bottom: 18px;
  box-sizing: border-box;
  overflow-y: scroll;

  .opera-table-container {
    border: 1px solid #eee;
    border-bottom: 0;
  }
}
</style>
